<template>
  <div class="header">
    <div class="header-left">
      <span class="iconfont icon-back">&#xe647;</span>
    </div>
    <div class="header-search">
      <input type="search" placeholder="输入城市/景点/游玩主题" />
      <span class="iconfont icon-search">&#xe650;</span>
    </div>
    <router-link to="/city">
      <div class="header-right">
        {{this.city}}
        <span class="iconfont city-icon">&#xe614;</span>
      </div>
    </router-link>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "HomeHeader",
  computed: {
    ...mapGetters(["city"])
  }
};
</script>

<style lang="stylus" scoped>
@import '~@/assets/style/variables.styl'
@import '~@/assets/style/mixins.styl'

.header
  height: $headerHeight
  background: $bgColor
  color: white
  display: flex
  line-height: $headerHeight
  font-size: 0.28rem
  .header-left
    height: 100%
    width: 0.64rem
    text-align: center
    .icon-back
      font-size: 0.38rem
  .header-right
    height: 100%
    width: 1.24rem
    text-align: center
    color: #fff
    updateText()
    .city-icon
      margin-left: -0.04rem
      line-height: 1
      font-size: 0.38rem
  .header-search
    flex: 1
    color: #ccc
    padding-bottom: 0.2rem
    position: relative
    .icon-search
      position: absolute
      left: 0.1rem
      top: 0
      font-size: 0.32rem
    input
      height: 100%
      width: 100%
      outline: none
      border-radius: 0.1rem
      border: 0.01rem solid #4fc3f7
      text-indent: 0.5rem
</style>
